<template>
  <div>

    <!-- 任务资源区 -->
    <div class="tr-view">

      <!-- 任务进度区 -->
      <div class="task-view">

        <!-- 更多 -->
        <a href="#" @click="showMoreTask">
          <Icon name="more" style="margin-top: 3px;" /> 更多
        </a>

        <!-- 任务列表区 -->
        <Tabs defaultActiveKey="1" type="card" style="border-radius: 5px; overflow: hidden;">
          <TabsPane key="1" tab="进行中" style="background-color: whitesmoke; height: 350px;">
            <div class="list-item" v-for="task in refData.reviewTaskDoing" :key="task.reviewTaskId">
              <div class="list-col-p0"></div>
              <div class="list-col-p1">
                <span class="list-item-title">{{ task.reviewTaskName.length > 20 ? `${task.reviewTaskName.substr(0, 20)}...` : task.reviewTaskName }}</span>
                <span class="list-item-number">用例编号：{{ task.reviewTaskNumber }}</span>
              </div>
              <div class="list-col-p2">
                {{ task.startTime }}
              </div>
              <div class="list-col-p3">
                <a class="list-item-link" href="#" @click="showTaskDetail(task)">查看详情</a>
                <div class="list-item-status">
                  <span :style="`display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: ${resultTypeClr(task.reviewResult)}; margin-right: 5px`" />
                  {{ resultType(task.reviewResult) }}
                </div>
              </div>
            </div>
          </TabsPane>
          <TabsPane key="2" tab="已完成" style="background-color: whitesmoke; height: 350px;">
            <div class="list-item" v-for="task in refData.reviewTaskDone" :key="task.reviewTaskId">
              <div class="list-col-p0"></div>
              <div class="list-col-p1">
                <span class="list-item-title">{{ task.reviewTaskName.length > 20 ? `${task.reviewTaskName.substr(0, 20)}...` : task.reviewTaskName }}</span>
                <span class="list-item-number">用例编号：{{ task.reviewTaskNumber }}</span>
              </div>
              <div class="list-col-p2">
                {{ task.startTime }}
              </div>
              <div class="list-col-p3">
                <div class="list-item-status">
                  <span :style="`display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: ${resultTypeClr(task.reviewResult)}; margin-right: 5px`" />
                  {{ resultType(task.reviewResult) }}
                </div>
              </div>
            </div>
          </TabsPane>
        </Tabs>
      </div>

      <!-- 资源预览区 -->
      <div class="resource-area">
        <p class="rs-title">
          资源统计
        </p>
        <div class="rs-content">
          <li style="border-right: 1px solid lightgray;">
            <span class="rs-content-subject">解决方案</span>
            <span class="rs-content-value">{{ valueNum(refData.sumProduce) }}</span>
          </li>
          <li style="vertical-align: top;">
            <span class="rs-content-subject">评测管理</span>
            <span class="rs-content-value">{{ valueNum(refData.sumReviewCase) }}</span>
          </li>
          <li style="border-right: 1px solid lightgray; border-top: 1px solid lightgray;">
            <span class="rs-content-subject">实验室工具</span>
            <span class="rs-content-value">{{ valueNum(refData.sumTool) }}</span>
          </li>
          <li style="border-top: 1px solid lightgray;">
            <span class="rs-content-subject">承接项目</span>
            <span class="rs-content-value">{{ valueNum(refData.sumItem) }}</span>
          </li>
        </div>
      </div>
    </div>

    <!-- 工具评估区 -->
    <!-- <div class="tool-assessment-area">
      <div class="assessment-banner">
        <Icon name="train" style="margin-top: 12px; margin-right: 5px;" />
        自研工具支撑
      </div>
      <div class="assessment-list">
        <img src="@/assets/logo.png" alt="">
      </div>
    </div> -->
  </div>
</template>

<script>
export default {
  name: "app",
  props: {
    refData: {
      default: () => {}
    }
  },
  data: function () {
    return {}
  },
  mounted: function () {},
  computed: {
    valueNum: function () {
      return (val) => {
        return isNaN(val) ? '--' : val;
      }
    },
    resultType: function () {
      return (val) => {
        const resultType = this.refData.resultTypes.find(type => type.value == val);
        return resultType ? resultType.label : '--';
      }
    },
    resultTypeClr: function () {
      return (val) => {
        const resultType = this.refData.resultTypes.find(type => type.value == val);
          if (resultType) {
          let color;
          switch(resultType.raw.listClass) {
            case "primary":
              color = 'blue';
              break;
            case "success":
              color = 'green';
              break;
            case "warning":
              color = 'gold';
              break;
            case "danger":
              color = 'red';
              break;
            default:
              color = 'default';
          }
          return color;
        } else return 'gray';
      }
    },
  },
  methods: {
    showMoreTask: function () {
      console.log("showMoreTask...");
      this.$router.push('/doreview/reviewresult')
    },
    showTaskDetail: function (task) {
      console.log("showTaskDetail: ", task);
      this.$router.push('/doreview/reviewresult')
    }
  }
}
</script>

<style scoped>
  /* ---------- Details 详细展现区 ---------- */
  .tr-view {
    /* background-color: white; */
    display: flex;
    flex-direction: row;
  }

  /* 任务进度区 */
  .task-view {
    /* background-color: yellow; */
    position: relative;
    padding-right: 5px;
    flex: 3;
  }

  .task-view > a {
    position: absolute;
    top: 10px;
    right: 30px;
    z-index: 1;
  }

  .list-item {
    height: 70px;
    border-bottom: 1px solid gray;
    background-color: white;

  }
  .list-col-p0 {
    display: inline-block;
    width: 15px;
    height: 100%;
    /* background-color: pink; */
  }
  .list-col-p1 {
    vertical-align: top;
    display: inline-block;
    width: 300px;
    height: 100%;
  }
  .list-item-title {
    display: block;
    margin-top: 11px;
  }
  .list-item-number {
    display: block;
    color: #595959;
    margin-top: 5px;
  }
  .list-col-p2 {
    vertical-align: top;
    display: inline-block;
    width: 90px;
    height: 100%;
    line-height: 70px;
    color: #595959;
    /* background-color: pink; */
  }
  .list-col-p3 {
    vertical-align: top;
    float: right;
    height: 100%;
    /* background-color: pink; */
  }
  .list-item-status {
    float: right;
    margin-top: 25px;
    margin-right: 15px;
    width: 90px;
  }
  .list-item-link {
    float: right;
    margin-top: 25px;
    padding-right: 25px;
  }

  /* 资源预览区 */
  .resource-area {
    /* background-color: wheat; */
    padding-top: 1px;
    flex: 2;
    border-radius: 5px;
    overflow: hidden;
  }
  .rs-title {
    background-color: #F7F8FA;
    height: 36px;
    line-height: 36px;
    margin: 0;
    padding-left: 20px;
  }
  .rs-content {
    /* border: 1px solid black; */
    height: 350px;
  }
  .rs-content > li {
    list-style-type: none;
    background-color: white;
    display: inline-block;
    width: 50%;
    height: 50%;
    padding-top: 40px;
  }
  .rs-content > li > span {
    display: block;
    /* background-color: orange; */
    text-align: center;
  }
  .rs-content > li > .rs-content-subject {
    font-size: 16px;
    font-weight: 100;
  }
  .rs-content > li > .rs-content-value {
    font-size: 36px;
    font-weight: 600;
  }

  /* 工具评估区 */
  .tool-assessment-area {
    background-color: whitesmoke;
    margin-top: 5px;
    border-radius: 3px;
    overflow: hidden;
  }
  .assessment-banner {
    padding-left: 10px;
    background-color: #E9EBF0;
    height: 40px;
    line-height: 40px;
  }
  .assessment-list {
    text-align: center;
  }
</style>
